<template>
  <div class="w-full h-full">
    <el-row class="w-full h-full">
      <el-col :span="1" class="h-full bg-[#fff]">
        <el-anchor
          :container="containerRef"
          :select-scroll-top="true"
          direction="vertical"
          type="default"
          :offset="1000"
          style="min-width: 80px"
          @click="handleClick"
        >
          <el-anchor-link href="#part1" title="客户信息" />
          <el-anchor-link href="#part2" title="企业信息" />
          <el-anchor-link href="#part3" title="开通信息" />
          <el-anchor-link href="#part4" title="登录信息" />
        </el-anchor>
      </el-col>
      <el-col :span="23">
        <div ref="containerRef" style="height: 90vh; overflow-y: auto" class="p-20px pt-0px h-full bg-[#fff]">
          <el-card id="part1" class="bg-[#fff] p-10px" shadow="never">
            <SubTitle title="客户信息"></SubTitle>
            <div class="pt-20px">
              <CCForm :forms="state.customerInfoForms" :params="formData" :gutter="20"></CCForm>
            </div>
          </el-card>
          <el-card id="part2" class="bg-[#fff] my-20px p-10px" shadow="never">
            <SubTitle title="企业信息"></SubTitle>
            <h1 class="text-16px py-20px">营业执照信息</h1>
            <CCForm :forms="state.EnterpriseInfoForms" :params="formData" :gutter="20"></CCForm>
            <h1 class="text-16px py-20px">法人身份信息</h1>
            <div class="w-1/2">
              <CCForm :params="formData" :forms="state.corporateIdentityInfoForms" :gutter="20"></CCForm>
            </div>
          </el-card>
          <el-card id="part3" class="bg-[#fff] my-20px p-10px" shadow="never">
            <SubTitle title="开通信息"></SubTitle>
            <div class="pt-20px">
              <CCForm :params="formData" :forms="state.activateInfoForms" :gutter="20"></CCForm>
            </div>
          </el-card>
          <el-card id="part4" class="bg-[#fff] my-20px p-10px" shadow="never">
            <SubTitle title="登录信息"></SubTitle>
            <div class="p-20px bg-linear-purple rounded-10px my-20px">
              <p class="text-[#6B678E] text-[14px]">说明：</p>
              <p class="py-10px text-[#6b678E]">
                1、运营管理平台登录地址：<el-link type="primary" href="https://test-ope.qingyunzu.com"
                  >https://test-ope.qingyunzu.com</el-link
                >
              </p>
              <p class="text-[#6b678E]">2、首次登录时默认密码为登录手机号的后6位。</p>
            </div>
            <CCForm :params="formData" :forms="state.loginInfoForms" :gutter="20"></CCForm>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from "vue";
  import {
    customerInfoParams,
    customerInfoForms,
    EnterpriseInfoForms,
    corporateIdentityInfoForms,
    activateInfoForms,
    loginInfoForms,
  } from "@/crudOption/customer/detail";
  import SubTitle from "@/views/customer/component/SubTitle/index.vue";
  import CCForm from "@/views/customer/component/CCForm/index.vue";

  import { useRouter, useRoute } from "vue-router";
  import { cloneDeep } from "lodash";

  const props = defineProps({
    id: {
      type: [String, Number],
      default: "",
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  });

  const containerRef = ref(null);
  const state = reactive({
    customerInfoParams: cloneDeep(customerInfoParams), //新增编辑提交的对象参数
    customerInfoForms: cloneDeep(customerInfoForms), //客户信息表单配置
    EnterpriseInfoForms: cloneDeep(EnterpriseInfoForms), //企业信息表单配置
    corporateIdentityInfoForms: cloneDeep(corporateIdentityInfoForms), //法人身份信息表单配置
    activateInfoForms: cloneDeep(activateInfoForms), //开通信息表单配置
    loginInfoForms: cloneDeep(loginInfoForms), //登录信息表单配置
  });
  // 锚点点击事件
  const handleClick = e => {
    e.preventDefault();
  };
  const loadGetDict = (dictCode = "") => {
    Api.customer.DictListChildrenByDictCode({ dictCode }).then(res => {
      if (res.data) {
        let options = res.data.map(item => ({ ...item, value: item.dictValue, label: item.dictLabel }));
        if (dictCode.includes("validityPeriodType")) {
          state.EnterpriseInfoForms[6].options = options;
        }
        if (dictCode.includes("businessLicenseType")) {
          state.EnterpriseInfoForms[2].options = options;
        }
      }
    });
  };
  const loadCategoryList = (data = {}) => {
    Api.customer.CategoryList(data).then(res => {
      console.log(res, "res");
      state.activateInfoForms[5].options = res.data.records;
    });
  };
  //获取详情接口

  onMounted(() => {
    loadGetDict("qingyun.support.customer.validityPeriodType"); //有效期类型
    loadGetDict("qingyun.support.customer.businessLicenseType"); //营业执照类型
    loadCategoryList();
    // loadCustomerDetail(props.id);
  });
</script>
<style lang="scss" scoped>
  :deep(.el-card) {
    background: linear-gradient(180deg, var(--bd8) 0%, var(--bg) 76px);
    border-radius: 10px;
    border: 0;
  }
  .bg-linear-purple {
    background: linear-gradient(180deg, var(--bd8) 0%, var(--bg) 76px);
  }
</style>
